/***************************
 * ui.js
 * The UI components
 * Author: PKM
 ****************************/

function UIManager(){
	this.playerArray = new Array();
	this.overlay = null;	
	this.desk = null;
	this.chat = null;
	this.game_panel = null;
	this.selfUI = null;
	this.status = null;
	this.currentMsg = null;
	
	myself = this;
	
	this.init = function(){
		myself.overlay = $(".overlay");
		myself.desk = $("#desk");
		myself.game_panel = $("#game-panel");
		myself.chat = $('.chat');
		myself.status = $('.status-bar');
		myself.currentMsg = $('.current');
		myself.currentMsg.fadeTo('fast',0.5);	
		myself.currentMsg.toggle(false);
		myself.selfUI = new SelfUI($('.user'));
	}	
	
	this.createAllPlayer = function(game){
		var players_total = game.players.length;
		
	    // add the players into desk
	    var side = (players_total > 6) ? 2 : 1;
	    for (var i = 1; i < players_total; i++) {
	        var pid = (i + game.myid) % players_total;
			var player = game.players[pid];
			
	        var ui = new PlayerUI();
	        myself.playerArray[pid] = ui;
			
			
			
	        dom = ui.dom;
	        if (i <= side) {
				$('#player-area-right').prepend(dom);
			}
			else {
				if (i >= players_total - side) {
					$('#player-area-left').append(dom);
				}
				else {
					$('#player-area-top').prepend(dom);
				}
			}
	    }			
		myself.playerArray[game.myid%players_total] = myself.selfUI;

		myself.update(game);
	};
	
	this.update = function(game){
		var players_total = game.players.length;
		for(var i=0;i<players_total;i++){
			myself.playerArray[i].update(game.players[i]);
		}
	}
	
	this.selectFunctionCard = function(cards, callback){
		myself.selfUI.selectFunctionCard(cards,callback);
	};
	
	this.unselectFunctionCard = function(){
		myself.selfUI.unselectFunctionCard();
	};
	
	/** return array ID **/
	function helperSelectCharacter(i, callback){
				myself.playerArray[i].dom.fadeTo('fast',0.65);
				myself.playerArray[i].dom.mouseenter(function(evt){
					$(this).fadeTo('fast',1)
				});
				myself.playerArray[i].dom.mouseleave(function(evt){
					$(this).fadeTo('fast',0.65)
				});
				myself.playerArray[i].dom.click(function(evt){
					callback(i);
				});		
	}
	
	this.selectCharacter = function(characters, callback){
		for(i = 0;i<myself.playerArray.length; i++){
			if(array_exist(characters,i)){
				helperSelectCharacter(i,callback);
			}else{
				myself.playerArray[i].dom.fadeTo('fast',0.15);	
			}
		}
	};

	this.unselectCharacter = function(){
		for(i=0;i<myself.playerArray.length; i++){
				myself.playerArray[i].dom.fadeTo('fast',1);		
				myself.playerArray[i].dom.unbind('click');
				myself.playerArray[i].dom.unbind('mouseenter');
				myself.playerArray[i].dom.unbind('mouseleave');	
		}
	};
	
	this.selectBlackCard = function(callback){
		myself.selfUI.selectBlackCard(callback);
	};
	
	this.unselectBlackCard = function(){
		myself.selfUI.unselectBlackCard();		
	};
	
	
	this.selectCurrentMessage = function(callback){
		myself.currentMsg.fadeTo('fast',8);		
		myself.currentMsg.mouseenter(function(evt){
			$(this).fadeTo('fast',1)
		});
		myself.currentMsg.mouseleave(function(evt){
			$(this).fadeTo('fast',0.8)
		});
		myself.currentMsg.click(function(evt){
			callback(true);
		});	
	};
	
	this.unselectCurrentMessage = function(){
		myself.currentMsg.fadeTo('fast',0.5);	
		myself.currentMsg.unbind('click');
		myself.currentMsg.unbind('mouseenter');
		myself.currentMsg.unbind('mouseleave');		
	};
	
	
	
	
	this.addNewCard = function(who, card, type){
		if(type == CARD_TYPE_MESSAGE){
			myself.playerArray[who].addMessageCard(card);
		}else{
			myself.playerArray[who].addFunctionCard(card);			
		}
	}
	
	
	var history = new Array();
	this.showHistory = function(msg){
		if(history.push(msg)>9){
			history.shift();
		}
		var out = "";
		for(i=0;i<history.length;i++){
			out += history[i] + "<br>";
		}
		myself.chat.html(out);
	}
	
	this.showStatus = function(msg){
		//phase, state, turn, player
		myself.status.html(msg);
	}
	
	this.stopAllPlayerTimer = function(){
		for(var i =0;i<myself.playerArray.length;i++){
			myself.playerArray[i].timer.stop();
		}
	}
	
	this.displayDeskMessage = function(message_info){
		cid 		= message_info[0];
		type 		= message_info[1];
		direction 	= message_info[2];
		target		= message_info[3];
		endpoint 	= message_info[4];
		card = getCard(cid);
		var output = "";
		output += (type == 2)? "<b>" + card.name + "</b>":"<b>????</b>";
		output += "<br>";
		output += "("+ card.type+")";
		output += "<br><br><br>";
		//output += "FROM ";
		myself.currentMsg.html(output);
		myself.currentMsg.toggle(true);
	}
	this.hideDeskMessage = function(){		
		myself.currentMsg.toggle(false);
	}
}

function debug(msg){
    desk.html(msg + "<br>" + desk.html());
}

function helper_create_card(type,c){
	var card;
	switch (type){
		case 1://player
			card = $("<div class='card'></div>");
		break;
		case 2://me function
			card = $("<div class='function card'></div>");	
			card.html("<b>" +c.name + "</b><br>(" +c.type +")");	
		break;
		case 3://me message
			card = $("<div class='message card'></div>");		
		break;
		default:
			card = $("<div class='card'></div>");			
	}
	
	switch(c.color){
		case 1: card.css('background-color', 'red'); break;
		case 2: card.css('background-color', 'blue'); break;
		case 3: card.css('background-color', 'black'); break;
	}	
	
	card.attr('cid', c.id);
	card.mouseenter(function(evt){showCard(evt,$(this))});
	card.mouseleave(function(evt){unshowCard(evt,$(this))});
	return card;
}


function showCard(evt,obj){	
	var w = ($(window).width() - uiManager.overlay.width())/2;
	var h = 150;		
	uiManager.overlay.css({ top: h, left: w });
	var card = getCard(obj.attr('cid'));
	switch(card.color){
		case 1: uiManager.overlay.css('background-color', 'red'); break;
		case 2: uiManager.overlay.css('background-color', 'blue'); break;
		case 3: uiManager.overlay.css('background-color', 'black'); break;
	}
	
	uiManager.overlay.html("<b>" + card.id + ":" + card.name + "</b><br>(" + card.type+ ")<br><br>" + card.desc);
	
	uiManager.overlay.toggle(true);
}

function unshowCard(evt){	
	uiManager.overlay.toggle(false);
}

function array_exist(array, item){
	for(var i=0; i <array.length; i++){
		if(array[i] == item)
			return true;
	}
	return false;
}

function get_random(max){
	return Math.floor(Math.random() * max);
}

/*************************
 * Timer Object
 * @param {Object} dom the load bar dom
 */
function Timer(dom){
	var _stime;
    var _etime;
    var _time;
    var _countDownTimer;
	var _dom = dom;
	
	var _myself = this;
	this.callback = null;
	
	this.__updateTimerBar = function(){
        var t = new Date();
        var per = (_etime - t.getTime()) / _time * 100;
        _dom.width(per + "%");
        if (t.getTime() > _etime) {
            _myself.stop();
            if (_myself.__callback) {
                _myself.__callback();
            }
        }
    }
    
    this.stop = function(){
		if(_countDownTimer)
        	clearInterval(_countDownTimer);
        _countDownTimer = null;
		_dom.width("0%");
    }
    
    this.start= function(t, _callback){
        _myself.__callback = _callback;
        _time = t;
        _stime = new Date();
        _stime = _stime.getTime();
        _etime = _stime + t;
        _countDownTimer = setInterval(_myself.__updateTimerBar, 50);
    }	
}
